<template>
  <div class="box-wrapper">
    <!-- 头部 -->
    <div class="header">
      <h3>新型冠状病毒事实检测</h3>
      <div class="right">当前时间：{{ data | formatTime }}</div>
    </div>
    <div class="cen">
      <!-- 左侧 -->
      <div class="left-box">
        <dv-border-box-12 class="left1"
          ><div class="left11" style="width: 100%; height: 100%"></div
        ></dv-border-box-12>
        <dv-border-box-12 class="left1">
          <div class="left22" style="width: 100%; height: 100%"></div
        ></dv-border-box-12>
        <dv-border-box-12 class="left1">
          <div class="left33" style="width: 100%; height: 100%"></div
        ></dv-border-box-12>
      </div>

      <!-- 中间 -->
      <div class="center">
        <div class="top">
          <div class="box">
            <dv-decoration-5 style="width: 300px; height: 40px" :dur="6" />
            <div class="box-item">
              <div class="ul">
                <div class="li">{{ list.confirm }}</div>
                <div class="li">{{ list.nowConfirm }}</div>
                <div class="li">{{ list.heal }}</div>
                <div class="li ll">{{ list.dead }}</div>
              </div>
            </div>
            <ul class="iii">
              <li>累计确诊</li>
              <li>现存确诊</li>
              <li>累计治愈</li>
              <li>累计死亡</li>
            </ul>
          </div>
          <div class="btn">
            <div class="button">累计确诊</div>
            <div class="button">现存确诊</div>
          </div>
        </div>

        <div class="bottom">
          <div class="boss">
            <div class="con" style="width: 100%; height: 100%"></div>
          </div>
          <img src="@/assets/image/map.png" class="img1" />
          <img src="@/assets/image/jt.png" class="img2" />
          <img src="@/assets/image/lbx.png" class="img3" />
        </div>
      </div>

      <!-- 右侧 -->
      <div class="right-box">
        <dv-border-box-12 class="right1"
          ><div class="right11" style="width: 100%; height: 100%"></div
        ></dv-border-box-12>
        <dv-border-box-12 class="right1"
          ><div class="right22" style="width: 100%; height: 100%"></div
        ></dv-border-box-12>
        <dv-border-box-12 class="right1"
          ><div class="right33" style="width: 100%; height: 100%"></div
        ></dv-border-box-12>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import $ from "jquery";
import "@/components/index";
import { dataMap } from "@/components/dataMap.js"; //地图用数据
import { nameMap } from "@/components/nameMap.js"; //中英文转换文件
import Leftone from "../components/left1";
import Lefttwo from "../components/left2";
import Leftthree from "../components/left3";
import Rightone from "../components/right1";
import Righttwo from "../components/right2";
import Rightthree from "../components/right3";
import Con from "../components/content";
export default {
  name: "home",
  data() {
    return {
      data: new Date(),
      list: [],
    };
  },
  components: {
    Leftone,
    Lefttwo,
    Leftthree,
    Rightone,
    Righttwo,
    Rightthree,
    Con,
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  mounted() {
    console.log(this.list, "3333333333333333");

    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.data = new Date(); // 修改数据date
    }, 1000);

    //请求数据
    let that = this;
    $.ajax({
      url: `https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign`,
      dataType: "jsonp",
      jsonpCallback: "cb", //也可跟后端约定函数名
      success(res) {
        console.log("ajax数据111", res);
        let foreinData = JSON.parse(res.data);
        console.log("ajax数据111", JSON.parse(res.data));

        //中间
        that.getdata(foreinData.globalStatis);

        //调用第1个数据
        const option1 = that.getList(foreinData.countryAddConfirmRankList);
        let chartDom = document.querySelector(".left11");
        that.addChart(chartDom, option1);

        //调用right2个数据
        const optionr2 = that.getright2(foreinData.globalDailyHistory);
        let chartDomr2 = document.querySelector(".right22");
        that.addChart(chartDomr2, optionr2);

        //调用左2
        const optionl2 = that.getleft2(foreinData.continentStatis);
        let chartDoml2 = document.querySelector(".left22");
        that.addChart(chartDoml2, optionl2);

        //调用左3
        const optionl3 = that.getleft3(foreinData.continentStatis);
        let chartDoml3 = document.querySelector(".left33");
        that.addChart(chartDoml3, optionl3);

        //调用右1
        const optionr1 = that.getright1(foreinData.globalDailyHistory);
        let chartDomr1 = document.querySelector(".right11");
        that.addChart(chartDomr1, optionr1);

        //调用右3
        const optionr3 = that.getright3(foreinData.importStatis.TopList);
        let chartDomr3 = document.querySelector(".right33");
        that.addChart(chartDomr3, optionr3);

        //调用中间地图
        const optioncon = that.getcon(foreinData.foreignList);
        let chartDomcon = document.querySelector(".con");
        that.addChart(chartDomcon, optioncon);
      },
    });
  },
  methods: {
    addChart(dom, option) {
      const myChart = echarts.init(dom);
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      return myChart;
    },
    // 中间
    getdata(countryAddConfirmRankList) {
      this.list = countryAddConfirmRankList;
    },

    //右2
    getright2(countryAddConfirmRankList) {
      let swAxis = [];
      let yAxis = [];
      let data = [];
      var min = 50;
      for (let val of countryAddConfirmRankList) {
        data.push(val.date);
        swAxis.push(val.all.dead);
        yAxis.push(val.all.heal);
      }
      console.log(countryAddConfirmRankList, "r2");

      let optionr2 = {
        color: ["#FF0087", "#FFBF00"],
        title: {
          text: "世界每周新增治愈和死亡人数",
          left: "50%",
          textAlign: "center",
          textStyle: {
            color: "#fff",
            fontSize: "18",
            fontWeight: "400",
          },
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          top: "10%",
          left: "center",
          right: 15,
          textStyle: {
            color: "#fff",
            fontSize: "14",
          },
          data: ["死亡人数", "治愈人数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: data,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "死亡人数",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgba(1, 191, 236,0.1)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: swAxis,
          },
          {
            name: "治愈人数",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(0, 221, 255)",
                },
                {
                  offset: 1,
                  color: "rgba(77, 119, 255,0.1)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },

            data: yAxis,
          },
        ],
      };

      return optionr2;
    },

    //左1
    getList(countryAddConfirmRankList) {
      let xAxis = [];
      let yAxis = [];
      var min = 50;
      for (let val of countryAddConfirmRankList) {
        xAxis.push(val.nation);
        yAxis.push(val.addConfirm);
      }
      let option1 = {
        color: ["#2f89cf"],
        title: {
          text: "新增确诊TOP10",
          left: "50%",
          textAlign: "center",
          textStyle: {
            color: "#fff",
            fontSize: "18",
            fontWeight: "400",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        // 修改图表的大小
        grid: {
          left: "0%",
          top: "30px",
          right: "3%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xAxis,
            axisTick: {
              alignWithLabel: true,
            },
            // 修改刻度标签 相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6) ",
              fontSize: "10",
            },
            // 不显示x坐标轴的样式
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // 修改刻度标签 相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6) ",
              fontSize: 10,
            },
            // y轴的线条改为了2像素
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 2,
              },
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "新增确诊",
            type: "bar",
            data: yAxis,
            barWidth: "35%",
            itemStyle: {
              barBorderRadius: 5,
            },
          },
        ],
      };
      return option1;
    },

    //左 2
    getleft2(countryAddConfirmRankList) {
      let data1 = [];
      let data2 = [];
      let data3 = [];
      let data4 = [];
      let data5 = [];

      let date = [];
      var min = 50;
      for (let val of countryAddConfirmRankList) {
        date.push(val.date);
        data1.push(val.statis["亚洲"]);
        data2.push(val.statis["北美洲"]);
        data3.push(val.statis["大洋洲"]);
        data4.push(val.statis["欧洲"]);
        data5.push(val.statis["其他"]);
      }
      console.log(data1, "222");
      var optionl2 = {
        title: {
          text: "大洲感染人数趋势",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: "18",
            fontWeight: "400",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "10%",
          left: "center",
          right: 15,
          textStyle: {
            color: "#fff",
            fontSize: "14",
          },
          data: ["亚洲", "北美洲", "大洋洲", "欧洲", "其他"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: date,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "亚洲",
            type: "line",
            stack: "Total",
            data: data1,
          },
          {
            name: "北美洲",
            type: "line",
            stack: "Total",
            data: data2,
          },
          {
            name: "大洋洲",
            type: "line",
            stack: "Total",
            data: data3,
          },
          {
            name: "欧洲",
            type: "line",
            stack: "Total",
            data: data4,
          },
          {
            name: "其他",
            type: "line",
            stack: "Total",
            data: data5,
          },
        ],
      };
      return optionl2;
    },

    //左3
    getleft3(countryAddConfirmRankList) {
      let data1 = [];
      let data2 = [];

      var min = 50;
      for (let val of countryAddConfirmRankList) {
        data1.push(val.statis["北美洲"]);
        data2.push(val.statis["欧洲"]);
      }
      let optionl3 = {
        title: {
          text: "大洲感染人数饼状图",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: "18",
            fontWeight: "400",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "2%",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: "15",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: data1, name: "北美洲" },
              { value: data2, name: "欧洲" },
            ],
          },
        ],
      };
      return optionl3;
    },

    //右1
    getright1(countryAddConfirmRankList) {
      let data1 = [];
      let data2 = [];
      let data3 = [];
      let data4 = [];
      let data5 = [];

      var min = 50;
      for (let val of countryAddConfirmRankList) {
      }
      var data = [70, 34, 60, 78, 69];

      var titlename = ["美国", "西班牙", "法国", "意大利", "德国"];
      var valdata = [];
      var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];

      var optionr1 = {
        title: {
          text: "大洲感染人数饼状图",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: "18",
            fontWeight: "400",
          },
        },
        grid: {
          left: "5%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              rich: {
                lg: {
                  backgroundColor: "#339911",
                  color: "#fff",
                  borderRadius: 15,
                  padding: 20,
                  align: "center",
                  width: 15,
                  height: 30,
                },
              },
            },
          },
          {
            show: true,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: data,
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}%",
              },
            },
          },
          {
            name: "框",
            type: "bar",
            yAxisIndex: 1,
            barGap: "-100%",
            data: [100, 100, 100, 100, 100],
            barWidth: 15,
            itemStyle: {
              normal: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 3,
                barBorderRadius: 15,
              },
            },
          },
        ],
      };
      return optionr1;
    },

    //右3
    getright3(countryAddConfirmRankList) {
      let data = [];

      var min = 50;

      // data.push(val);
      countryAddConfirmRankList.forEach((item) => {
        var obj = {
          value: item.importedCase,
          name: item.province,
        };
        data.push(obj);
      });
      console.log(data, "2222");

      let option3 = {
        title: {
          text: "大洲感染人数饼状图",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: "18",
            fontWeight: "400",
          },
        },

        color: [
          "#7eacea",
          "#e15777",
          "#95ea71",
          "#ea9b4f",
          "#7577df",
          "#be72d8",
          "#fff",
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "统计",
            type: "pie",
            radius: [10, 80],
            center: ["50%", "60%"],
            roseType: "radius",
            label: {
              show: true,
              formatter: "{b}",
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            data: data,
          },
        ],
      };
      return option3;
    },

    //中间地图
    getcon(countryAddConfirmRankList) {
      var data = [];
      // data.push(val);
      countryAddConfirmRankList.forEach((item) => {
        var obj = {
          value: item.confirm,
          name: item.name,
        };
        data.push(obj);
      });
      console.log(data, "000");
      let optioncon = {
        tooltip: {
          trigger: "item",
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
        },
        visualMap: {
          type: "piecewise", //分段型。
          splitNumber: 6,
          inverse: true,
          pieces: [
            {
              min: 0,
              max: 500,
              color: "#759aa0",
            },
            {
              min: 500,
              max: 1000,
              color: "#73b9bc",
            },
            {
              min: 1000,
              max: 5000,
              color: "#8dc1a9",
            },
            {
              min: 5000,
              max: 10000,
              color: "#e69d87",
            },
            {
              min: 10000,
              max: 30000,
              color: "#ea7e53",
            },
            {
              min: 30000,
              //max: 1000,
              color: "#dd6b66",
            },
          ],
          left: "left",
          top: "bottom",
          textStyle: {
            color: "#fff",
            fontSize: "13",
          },
        },
        series: [
          {
            name: "新型冠状病毒事实检测",
            type: "map",
            mapType: "world",
            roam: false,
            itemStyle: {
              emphasis: { label: { show: true } },
            },
            data: [...data, ...dataMap],
            nameMap: nameMap,
          },
        ],
      };
      return optioncon;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  ul {
    list-style: none;
  }
}

.box-wrapper {
  width: 100%;
  height: 1200px;
  display: flex;
  flex-direction: column;
  background-image: url("../assets/image/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  .cen {
    width: 100%;
    height: 1000px;
    flex: 1;
    display: flex;

    // 左侧
    .left-box {
      flex: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;

      padding: 20px;
      .left1 {
        width: 100%;
        height: 310px;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-content: center;
        background-image: url("../assets/image/line(1).png");
        background-size: cover;
        background-repeat: no-repeat;
      }
    }
    //中间
    .center {
      height: 100%;
      flex: 5;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top {
        height: 30%;
        width: 100%;

        .box {
          background-color: rgba(101, 132, 226, 0.1);
          height: 70%;
          padding: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          .iii {
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 20px;
            color: #b2b4c2;
            font-family: electronicFont;
            li {
              width: 25%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          .box-item {
            width: 100%;
            height: 58%;
            border: 1px solid rgb(36, 103, 196);
            display: flex;
            justify-content: center;
            align-items: center;
            .ul {
              width: 100%;
              height: 50%;
              display: flex;
              justify-content: space-around;
              align-items: center;
              font-size: 30px;
              color: #ffeb7b;
              font-family: electronicFont;
              .li {
                width: 25%;
                height: 100%;
                border-right: 1px solid #b2b4c2;
                display: flex;
                justify-content: center;
                align-items: center;
              }
              .ll {
                border: 0;
              }
            }
          }
        }
        .btn {
          flex: 1;
          height: 100%;
          // background-color: #ffeb7b;
          display: flex;
          justify-content: space-around;
          align-content: center;
          padding-top: 30px;
          .button {
            width: 200px;
            border-radius: 50px;
            height: 70px;
            background-color: rgba(101, 132, 226, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 25px;
            color: white;
          }
          .button2 {
            width: 200px;
            border-radius: 50px;
            height: 70px;
            background-color: rgba(101, 132, 226, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 25px;
            color: #ffeb7b;
          }
        }
      }

      .bottom {
        position: relative;
        .boss {
          width: 100%;
          height: 100%;
          // background: #ffeb7b;
          position: absolute;
          z-index: 999;
        }
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        // background-color: #ffeb7b;
        .img1 {
          width: 510px;
          height: 510px;
        }
        .img2 {
          width: 540px;
          height: 540px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          animation: img2 7s linear infinite;
        }
        .img3 {
          width: 570px;
          height: 570px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 9;
          animation: img3 8s linear infinite;
        }
      }
    }
    // 右侧
    .right-box {
      flex: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      padding: 20px;
      .right1 {
        width: 100%;
        height: 310px;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-content: center;

        background-image: url("../assets/image/line(1).png");
        background-size: cover;
        background-repeat: no-repeat;
      }
    }
  }

  // 头部
  .header {
    height: 100px;
    width: 100%;
    background-image: url("../assets/image/head_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: relative;
    h3 {
      font-size: 40px;
    }
    .right {
      height: 100%;
      font-size: 22px;
      font-weight: 0 !important;
      color: #b2b4c2;
      display: flex;
      align-items: center;
      position: absolute;
      right: 20px;
    }
  }
}

@keyframes img2 {
  from {
    transform: translate(-50%, -50%) rotate(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes img3 {
  from {
    transform: translate(-50%, -50%) rotate(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>